<template>
  <div class="mainBox">
    <div class="routerMsg">{{ routerMsg }}</div>
    <div class="container">
      <div class="searchBox">
        <div class="search1">
          <el-input
            placeholder="请输入指标名称"
            prefix-icon="el-icon-search"
            v-model="searchObj.targetName"
          >
          </el-input>
        </div>
        <div class="search1">
          <el-input
            placeholder="请输入设备名称"
            prefix-icon="el-icon-search"
            v-model="searchObj.equipName"
          >
          </el-input>
        </div>
        <div class="search1">
          <el-select
            v-model="searchObj.emergencyScenecode"
            placeholder="应急场景"
          >
            <el-option
              v-for="item in emergency_scene_codeList"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </div>
        <div class="search1">
          <el-select v-model="searchObj.targetType" placeholder="指标类别">
            <el-option
              v-for="item in target_typeList"
              :key="item.id"
              :label="item.dictName"
              :value="item.dictCode"
            ></el-option>
          </el-select>
        </div>
        <div class="searchBtn">
          <el-button @click="searchList"> 查 询 </el-button>
        </div>
        <div class="searchBtn">
          <el-button class="reset" @click="resetSearch"> 重 置 </el-button>
        </div>
      </div>
      <div class="btnBox">
        <div class="addBtn">
          <el-button type="success" @click="addCompany('')">添加指标</el-button>
        </div>
        <div class="addBtn">
          <el-button type="success">导 入</el-button>
        </div>
        <div class="addBtn">
          <el-button type="success">导 出</el-button>
        </div>
      </div>
      <div class="tableBox">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="targetName"
            label="指标名称"
            width="260"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="equipName"
            label="设备名称"
            width="180"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="emergencyScenecodeName"
            label="应急场景"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="targetType"
            label="指标类别"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="targetUnit"
            label="计量单位"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="thresholdUpLimit"
            label="高报阈值"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="thresholdUpupLimit"
            label="高高报阈值"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="thresholdDownLimit"
            label="低报阈值"
          >
          </el-table-column>
          <el-table-column
            align="center"
            :show-overflow-tooltip="true"
            prop="thresholdDowndownLimit"
            label="低低报阈值"
          >
          </el-table-column>
          <el-table-column width="200" align="center" prop="address" label="操作">
            <template slot-scope="scope">
              <el-button
                style="color: #269e8f"
                type="text"
                @click="addCompany(scope.row)"
                >编辑</el-button
              >
              <el-button
                style="color: #2bbfe8"
                type="text"
                @click="addCompany(scope.row, 'see')"
                >查看</el-button
              >
              <el-button
                style="color: #f56c6c"
                type="text"
                @click="deleteCompany(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page.sync="params.pageNum"
          :page-size.sync="params.pageSize"
          :page-sizes="[10, 30, 50]"
          background
          layout="slot, sizes, prev, pager, next"
          :total="totalItemCount"
          @current-change="currentPage"
          @size-change="handleSizeChange"
        >
          <span class="totalNum" key="1">共 {{ totalItemCount }} 条数据</span>
        </el-pagination>
      </div>
    </div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="1218px"
      :before-close="handleClose"
      :show-close="false"
      :append-to-body="true"
      custom-class="dialogCompany"
    >
      <div class="dialogTitle" slot="title">{{ dialogTitle }}</div>
      <div class="dialogForm">
        <el-form
          ref="form"
          :rules="rules"
          :model="form"
          label-width="200px"
          :inline="true"
        >
          <div class="formBox">
            <div class="formItem">
              <div class="left">
                <el-form-item label="企业名称">
                  <el-select
                    v-model="form.companyName"
                    placeholder="请选择"
                    :disabled="seeForm"
                    @change="chooseEnterprise"
                  >
                    <el-option
                      v-for="item in companyInfoList"
                      :key="item.id"
                      :label="item.enterpriseName"
                      :value="item.enterpriseName"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="设备名称">
                  <el-select
                    v-model="form.equipCode"
                    placeholder="请选择"
                    :disabled="seeForm"
                    @change="chooseEquipCode"
                  >
                    <el-option
                      v-for="item in deviceList"
                      :key="item.id"
                      :label="item.equipName"
                      :value="item.equipCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="指标编码">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.targetCode"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="指标位置">
                  <el-input
                    placeholder="请输入"
                    v-model="form.targetPlace"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="指标类别">
                  <el-select
                    :disabled="seeForm"
                    v-model="form.targetType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in target_typeList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="指标名称">
                  <el-input
                    placeholder="请输入"
                    v-model="form.targetName"
                    :disabled="seeForm"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="计量单位">
                  <el-select
                    :disabled="seeForm"
                    v-model="form.targetUnit"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in unitList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="指标停用状态">
                  <el-select
                    :disabled="seeForm"
                    v-model="form.targetStatus"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in target_statusList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="信号类型">
                  <el-select
                    :disabled="seeForm"
                    v-model="form.signalType"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in signal_typeList"
                      :key="item.id"
                      :label="item.dictName"
                      :value="item.dictCode"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="开关量报警值">
                  <el-select
                    :disabled="seeForm || form.signalType !== '02'"
                    v-model="form.alarmValue"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in onOrOffList"
                      :key="item.label"
                      :label="item.label"
                      :value="item.label"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="高高报阈值">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.thresholdUpupLimit"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="高报阈值">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.thresholdUpLimit"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="低低报阈值">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.thresholdDowndownLimit"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="低报阈值">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.thresholdDownLimit"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="量程下限">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.rangeDown"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="量程上限">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.rangeUp"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
            <div class="formItem">
              <div class="left">
                <el-form-item label="位号">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.bitNo"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="right">
                <el-form-item label="描述">
                  <el-input
                    :disabled="seeForm"
                    placeholder="请输入"
                    v-model="form.targetDescription"
                  ></el-input>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          :disabled="seeForm"
          class="leftCancel"
          type="primary"
          @click="submitForm"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  pageList,
  dict,
  companyInfoList,
  deviceList,
  targetDetail,
  addForm,
  updateForm,
  deleteTarget,
} from '@/api/sensingManagement'

export default {
  name: 'generalInformation',
  props: {},
  components: {},
  data() {
    return {
      routerMsg: '',
      dialogVisible: false,
      form: {
        companyName: '',
        emergencyScenecode: '',
        equipCode: '',
        targetType: '',
        targetName: '',
        targetUnit: '',
        targetPlace: '',
        targetStatus: '',
        signalType: '',
        thresholdUpupLimit: '',
        thresholdUpLimit: '',
        thresholdDowndownLimit: '',
        thresholdDownLimit: '',
        rangeDown: '',
        rangeUp: '',
        bitNo: '',
        targetDescription: '',
        alarmValue: '',
      },
      rules: {
        companyName: [
          {
            required: true,
            message: 'companyName is required',
            trigger: 'blur',
          },
        ],
      },
      searchObj: {
        targetName: '',
        equipName: '',
        emergencyScenecode: '',
        targetType: '',
      },
      params: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      totalItemCount: null,
      dialogTitle: '新增传感指标数据',
      seeForm: false,
      unitList: [
        {
          label: 'ppm(溶液百万分比浓度)',
          value: 'ppm',
        },
        {
          label: 'mg/m3（气体质量浓度）',
          value: 'mg/m3',
        },
        {
          label: '%VOL（体积百分比）',
          value: '%VOL',
        },
        {
          label: '%LEL（爆炸下限浓度）',
          value: '%LEL',
        },
        {
          label: '℃',
          value: '℃',
        },
        {
          label: '%RH（湿度）',
          value: '%RH',
        },
      ],
      emergency_scene_codeList: [],
      target_typeList: [],
      companyInfoList: [],
      deviceList: [],
      target_statusList: [],
      signal_typeList: [],
      onOrOffList: [{ label: 0 }, { label: 1 }],
      submitCode: '',
    }
  },
  created() {
    this.pageList(this.params)
    this.emergency_scene_code('emergency_scene_code')
    this.target_type('target_type')
    this.target_status('target_status')
    this.signal_type('signal_type')
    this.companyInfoListFun()
    this.routerMsg = this.$route.meta.title
  },
  methods: {
    addCompany(row, type) {
      if (type === 'see') {
        this.commonDataInfoDetail(row.id)
        this.seeForm = true
        this.dialogTitle = '查看传感指标数据'
      } else if (row.id) {
        this.dialogTitle = '编辑传感指标数据'
        this.commonDataInfoDetail(row.id)
      } else {
        this.dialogTitle = '新增传感指标数据'
      }
      this.dialogVisible = true
    },
    handleClose() {
      this.form = {
        companyName: '',
        emergencyScenecode: '',
        equipCode: '',
        targetType: '',
        targetName: '',
        targetUnit: '',
        targetPlace: '',
        targetStatus: '',
        signalType: '',
        thresholdUpupLimit: '',
        thresholdUpLimit: '',
        thresholdDowndownLimit: '',
        thresholdDownLimit: '',
        rangeDown: '',
        rangeUp: '',
        bitNo: '',
        targetDescription: '',
        alarmValue: '',
        identificationCode: '',
      }
      this.submitCode = ''
      this.pageList(this.params)
      this.seeForm = false
      this.dialogVisible = false
    },
    async submitForm() {
      if (this.form.signalType === '02' && this.form.alarmValue === '') {
        this.$message.warning('请先完善所有信息再提交')
        return
      }
      if (this.form.alarmValue === '') {
        const renderForm = {
          companyName: this.form.companyName,
          emergencyScenecode: this.form.emergencyScenecode,
          equipCode: this.form.equipCode,
          targetType: this.form.targetType,
          targetName: this.form.targetName,
          targetUnit: this.form.targetUnit,
          targetPlace: this.form.targetPlace,
          targetStatus: this.form.targetStatus,
          signalType: this.form.signalType,
          thresholdUpupLimit: this.form.thresholdUpupLimit,
          thresholdUpLimit: this.form.thresholdUpLimit,
          thresholdDowndownLimit: this.form.thresholdDowndownLimit,
          thresholdDownLimit: this.form.thresholdDownLimit,
          rangeDown: this.form.rangeDown,
          rangeUp: this.form.rangeUp,
          bitNo: this.form.bitNo,
          targetDescription: this.form.targetDescription,
        }
        for (let k in renderForm) {
          if (renderForm[k] === '') {
            this.$message.warning('请先完善所有信息再提交')
            return
          }
        }
      } else {
        for (let k in this.form) {
          if (this.form[k] === '') {
            this.$message.warning('请先完善所有信息再提交')
            return
          }
        }
      }
      const obj = { ...this.form }
      if (this.form.id) {
        const renderData = { ...this.form, equipCode: this.submitCode }
        const res = await updateForm(JSON.stringify(renderData))
        if (res.code === 1) {
          this.$message.success('编辑成功')
          this.handleClose()
        } else {
          this.$message.error('编辑失败')
        }
      } else {
        const res = await addForm(JSON.stringify(obj))
        if (res.code === 1) {
          this.$message.success('新增成功')
          this.handleClose()
        } else {
          this.$message.error('新增失败')
        }
      }
    },
    resetSearch() {
      this.searchObj = {
        targetName: '',
        equipName: '',
        emergencyScenecode: '',
        targetType: '',
      }
      this.params = {
        pageNum: 1,
        pageSize: 10,
      }
      this.pageList(this.params)
    },
    async pageList(params) {
      const res = await pageList(params)
      this.tableData = res.data.list
      this.totalItemCount = res.data.total
    },
    currentPage(pageNum) {
      this.pageList({
        pageNum: pageNum,
        pageSize: this.params.pageSize,
        targetName: this.searchObj.targetName,
        equipName: this.searchObj.equipName,
        emergencyScenecode: this.searchObj.emergencyScenecode,
        targetType: this.searchObj.targetType,
      })
    },
    handleSizeChange(pageSize) {
      this.pageList({
        pageNum: this.params.pageNum,
        pageSize: pageSize,
        targetName: this.searchObj.targetName,
        equipName: this.searchObj.equipName,
        emergencyScenecode: this.searchObj.emergencyScenecode,
        targetType: this.searchObj.targetType,
      })
    },
    async commonDataInfoDetail(id) {
      const res = await targetDetail(id)
      this.submitCode = res.data.equipCode
      this.form = res.data
      this.form.equipCode = res.data.equipName
    },
    searchList() {
      const obj = {
        ...this.searchObj,
        pageNum: 1,
        pageSize: 10,
      }
      this.pageList(obj)
    },
    async emergency_scene_code(dictType) {
      const res = await dict({ dictType })
      this.emergency_scene_codeList = res.data
    },
    async target_type(dictType) {
      const res = await dict({ dictType })
      this.target_typeList = res.data
    },
    async companyInfoListFun() {
      const res = await companyInfoList()
      this.companyInfoList = res.data
    },
    async deviceListFun(obj) {
      const res = await deviceList(obj)
      this.deviceList = res.data
    },
    chooseEnterprise(e) {
      const findId = this.companyInfoList.find(
        (item) => item.enterpriseName === e
      )
      this.deviceListFun({ identificationCode: findId.identificationCode })
      this.form.identificationCode = findId.identificationCode
      this.form.equipCode = null
    },
    chooseEquipCode(e) {
      const findId = this.deviceList.find((item) => item.equipCode === e)
      this.form.emergencyScenecode = findId.emergencySceneCode
      this.submitCode = e
    },
    async target_status(dictType) {
      const res = await dict({ dictType })
      this.target_statusList = res.data
    },
    async signal_type(dictType) {
      const res = await dict({ dictType })
      this.signal_typeList = res.data
    },
    async deleteCompany(row) {
      const res = await deleteTarget(row.id)
      console.log(res)
      if (res.code === 1) {
        this.$message.success('删除成功')
        this.pageList({
          pageNum: this.params.pageNum,
          pageSize: this.params.pageSize,
          targetName: this.searchObj.targetName,
          equipName: this.searchObj.equipName,
          emergencyScenecode: this.searchObj.emergencyScenecode,
          targetType: this.searchObj.targetType,
        })
      } else {
        this.$message.error(res.msg)
      }
    },
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.routerMsg {
  padding: 20px;
  color: #999999;
  font-size: 14px;

}
.mainBox{
  width: 100%;
}
.container {
  height: 100%;
  background-color: #fff;
  border-radius: 8px;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 25px;
  .searchBox {
    display: flex;
    margin-bottom: 20px;
    .search1 {
      margin-right: 15px;
    }
    .searchBtn {
      .el-button {
        border: 1px solid #269e8f;
        color: #269e8f;
      }
      .reset {
        border: 1px solid #269e8f;
        color: #fff;
        background-color: #269e8f;
        margin-left: 20px;
      }
    }
  }
  .btnBox {
    display: flex;
    margin-bottom: 15px;
    .addBtn {
      margin-right: 20px;
      .el-button {
        background-color: #269e8f;
        border: 1px solid #269e8f;
      }
    }
  }
  .footerPage {
    padding-top: 20px;
    text-align: right;
    padding-right: 30px;
    ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
      background-color: #2aa59e !important; // 进行修改选中项背景和字体
      color: #fff;
    }
    .totalNum {
      font-size: 14px;
      font-weight: normal;
      margin-right: 10px;
    }
  }
}

.dialogTitle {
  text-align: center;
  border-bottom: 1px solid #d8d8d8;
  font-size: 20px;
  font-weight: 500;
  padding: 22px 0 19px 0;
}
::v-deep .el-dialog__header {
  padding: 0 30px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  .leftCancel {
    margin-left: 77px;
    background-color: #269e8f;
    border: 1px solid #269e8f;
  }
}
.dialogForm {
  .formBox {
    .formItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .left {
      width: 50%;
      height: 30px;
      line-height: 30px;
    }
    .right {
      width: 50%;
      height: 30px;
      line-height: 30px;
    }
    ::v-deep .el-input {
      height: 30px;
      width: 260px;
    }
    ::v-deep .el-input__inner {
      height: 30px;
    }
    ::v-deep .el-input__suffix {
      height: 40px;
    }
  }
}
::v-deep.dialogCompany {
  border-radius: 20px;
}
</style>
